<template>
  <div>
    <div v-if="propsItem.imgUrl || propsItem.pic" class="props-class-list" @click="checkSkin">
      <div class="skin-label" :class="{ 'check-skin-label': propsItem.hasGet && auditStatus === 0}">
        <div class="props-img">
          <el-image :src="propsItem.imgUrl || propsItem.pic">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </div>
      <span class="props-name">{{ propsItem.name }} {{ showLevels(propsItem) }}</span>
    </div>
    <div v-else class="audio-box" :class="{ 'audio-box-label': propsItem.hasGet && !showCheck }" @click="checkSkin">
      <span>{{ propsItem.name }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    index: Number,
    propsIndex: Number,
    propsItem: Object,
    showCheck: {
      type: Boolean,
      default: true
    },
    auditStatus: {
      type: Number,
      default: 1
    },
    showLevel: Boolean
  },
  methods: {
    checkSkin () {
      if (this.showCheck) return
      this.$emit('checkSkin', this.index, this.propsIndex)
    },
    showLevels (propsItem) {
        if (!this.showLevel) return ''
        if (Number(propsItem.userLevel)) {
            return `${propsItem.userLevel}级`
        } else if (Number(propsItem.level)) {
            return `${propsItem.level}级`
        }
        return ''
    }
  }
}
</script>
<style lang="scss">
.props-class-list{
  width: 180px;
  margin-right: 10px;
  text-align: center;
  .props-name{
    line-height: 24px;
  }
  .props-img{
    .image-slot{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 180px;
      height: 270px;
      background: rgb(241,241,244);
      color: #333333;
      span{
        color: #333333;
      }
    }
    img{
      width: 100%;
      vertical-align: top;
    }
  }
  .skin-label{
      width: 180px;
      display: block;
      cursor: pointer;
      border: 3px solid transparent;
    }
    .check-skin-label{
      border-color: #409EFF;
    }
    .skin-input{
        display: none;
        &:checked+label{
            cursor: pointer;
            border-color: #409EFF;
        }
    }
    .cancel-check{
        cursor:auto !important;
        border-color: transparent !important;
    }
    .el-image{
      vertical-align: top;
    }
}
.audio-box{
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  margin-right: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.audio-box-label{
  border-color: #409EFF;
  color: #409EFF;
}
</style>
